<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
		<style type="text/css">
			.my-navbar {
				padding: 20px 0;
				transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
			}

			nav ul:first-child a,
			.navbar-brand {
				background: transparent !important;
				color: #fff
			}

			.my-navbar a:hover {
				color: #45bcf9 !important;
				background: transparent;
				outline: 0
			}

			.my-navbar a {
				transition: color 0.5s ease-in-out;
			}

			/*-webkit-transition ;-moz-transition*/
			.top-nav {
				padding: 0;
				background: #000;
			}

			button.navbar-toggle {
				background-color: #fbfbfb;
			}

			/*整个背景都是transparent透明的，会看不到，所以再次覆盖一下*/
			button.navbar-toggle>span.icon-bar {
				background-color: #dedede
			}

			.navbar {
				padding-left: 40px;
			}

			.dropdown-toggle,
			.glyphicon-off {
				color: white;
				font-size: 15px;
			}

			/* .dropdown {
				margin-left: 600px;
			} */

			.dropdown-toggle:hover {
				color: white;
			}

			.alert-warning {
				height: 130px;
				margin-top: 20px;
			}

			.btn-danger,
			.btn-default {
				width: 100px;
			}
			.page-header{
				margin-top:0px;
				padding: 0;
			}
			.page-header h1 {
				padding: 0;
				margin-top: 0;
				font-size: 16px;
			}
			.chaozhuo .dropdown-toggle{
				background: #3a3f44;
				color: white;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-fixed-top my-navbar top-nav" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">

						<span class="glyphicon glyphicon-list"></span>

					</button>
					<a class="navbar-brand" href="#">重庆工程学院</a>
				</div>
				<div class="collapse navbar-collapse" id="example-navbar-collapse">
					<ul class="nav navbar-nav" style="padding:-10px;">
						<li><a href="index.html" class="glyphicon glyphicon-home">&nbsp后台首页</a></li>
						<li><a href="usermanage.html" class="glyphicon glyphicon-user" style="color: #45bcf9">&nbsp用户管理</a></li>
						<li><a href="contentmanage.html" class="glyphicon glyphicon-list-alt">&nbsp内容管理</a></li>
						<li><a href="#" class="glyphicon glyphicon-tags">&nbsp便签的管理</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right" style="padding-right: 60px ;padding-top: 10px;">
						<div class="dropdown">
							<span class="btn dropdown-toggle" data-toggle="dropdown">
								管理员
								<span class="caret"></span>
							</span>
							<ul class="dropdown-menu">
								<li>
									<a href="#" class="glyphicon glyphicon-home">&nbsp;前台首页</a>
								</li>
								<li>
									<a href="personalpage.html" class="glyphicon glyphicon-user">&nbsp;个人主页</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-cog">&nbsp;个人设置</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-credit-card">&nbsp;账户中心</a>
								</li>
								<li>
									<a href="#" class="glyphicon glyphicon-heart">&nbsp;我的收藏</a>
								</li>
								
							
							</ul>
							<li class="glyphicon glyphicon-off"><a href="" style="color: white;">退出</a></li>

					</ul>
				</div>
			</div>
		</nav>
		<div class="container">
			<div class="row">
				<ul class="col-md-2">
					<div class="list-group">
						<div class="list-group">
							<a href="usermanage.html" class="list-group-item active">用户管理</a>
							<a href="usersearch.html" class="list-group-item">用户搜索</a>
							<a href="usersearch.html"class="list-group-item">添加用户</a>
						</div>
					</div>
				</ul>



				<div class="col-md-10">
					<div class="page-header">
						<h1>用户管理</h1>
					</div>
					<ul class="nav nav-tabs">
						<li class="active"><a href="#">用户列表</a></li>
						<li><a href="usersearch.html">用户搜索</a></li>
						<li><a href="usersearch.html">添加用户</a></li>
					</ul>
					<table class="table">
						<thead>
							<tr class="well" style="border-top: none;">
								<th>ID</th>
								<th>用户名</th>
								<th>邮箱</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
			<ul class="pagination pull-right">
				<li class="pre1"><a href="#" class="pre">&laquo;</a></li>
				<li class="active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li class="next1"><a href="#" class="next">&raquo;</a></li>
			</ul>
		</div>
		<footer>
			<div class="row">
				<div class="col-md-12 text-center navbar-static-bottom"  style="margin-top: 30PX;">
					Copyright @ 2019-2020
		
				</div>
			</div>
		</footer>
		
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							修改用户
						</h4>
					</div>
					<div class="modal-body">
						<form action="" method="">
		
		
							<div class="form-group">
								<label for="username">用户名</label>
								<input class="form-control" type="text" id="username" placeholder="用户名" required>
							</div>
							<div class="form-group">
								<label for="pass">用户密码</label>
								<input class="form-control" type="password" id="pass" placeholder="输入用户密码">
							</div>
							<div class="form-group">
								<label for="pass">请输入用户邮箱</label>
								<input class="form-control" type="email" id="email" placeholder="请输入用户邮箱">
							</div>
							<div class="form-group">
								<label for="pass">所属用户组</label>
								<!-- <label for="userg">选择用户组</label> -->
								<select id="userg" class="form-control">
									<option value="1">限制会员</option>
									<option value="2">中级会员</option>
									<option value="3">注册会员</option>
								</select>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-light" data-dismiss="modal"  style="background:#3e444c">关闭
						</button>
						<input type="submit" class="btn btn-primary submit" value="修改">
							
						
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
				</body>
</html>
<script type="text/javascript">
	var onResize = function() {
		// apply dynamic padding at the top of the body according to the fixed navbar height
		$("body").css("padding-top", $(".navbar-fixed-top").height() * 1.5);
	};

	// attach the function to the window resize event
	$(window).resize(onResize);

	// call it also when the page is ready after load or reload
	$(function() {
		onResize();
	});
	
	function ajax(){
					$.ajax({
						type: "get",//发送请求的类型post，get
						dataType: "json",//默认是text
						url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/getUser`,//发送的地址
						// data: "username="+$("#username").val()+"password="+$("#password").val()+"",//传递的参数
						success: function (msg) {//成功的回调
						var data=msg.data
						for(var i=0;i<data.length;i++){
							$('.table').append(`<tr class="well rowinfo">
								<td>${data[i].id}</td>
								<td class="rawinfo">${data[i].name}</td>
								<td class="rawinfo1">${data[i].email}</td>
								<td>
									<div class="btn-group chaozhuo">
										<button type="button" class="btn" style="background-color: #3a3f44;">操作</button>
										<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" >
											<span class="caret" style="color: #fff;"></span>
											<span class="sr-only">切换下拉菜单</span>
										</button>
										<ul class="dropdown-menu operate" role="menu">
											<li class="edit"><a href="#" data-toggle="modal" data-target="#myModal">编辑</a></li>
											<li><a href="#">删除</a></li>
										</ul>
									</div>
								</td>
							</tr>`)
							
							
						}
						var currentPage=0
						 var pageSize = 3;//每一页显示的数目
						//删除功能
						$('.operate li:nth-child(2)').click(function(){
									 $(this).parents('.rowinfo').remove()
									 var sumRows = $('table').find('tbody tr').length;
									           var sumPages = Math.ceil(sumRows/pageSize);//总页数 
									 $('.pagination li').not('.pre1').not('.next1').hide().slice(0,sumPages).show()
									   let currentPage=$('.pagination .active a').html()-1
									   let num =$('table').find('tbody tr').slice(currentPage*pageSize,(currentPage+1)*pageSize).length
									  console.log(num);
									 
									 if(num==0){
									  let arr=$('.pagination li').not('.pre1').not('.next1')
									  if(currentPage>0){
										   $(arr[currentPage-1]).addClass('active');
										    console.log(currentPage);
										    currentPage=currentPage-1
											
									  }
									 
									 
									 }
									
									 
									
									 $('table').find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
									 
									 
						})
						//分页功能
	     
		  $('table').find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
		  $('.pagination li').not('.pre1').not('.next1').click(function(){
			  currentPage=$(this).text()-1
			  $('table').find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
		  })
		   var sumRows = $('table').find('tbody tr').length;  
		           var sumPages = Math.ceil(sumRows/pageSize);//总页数  
		 $('.pagination li').not('.pre1').not('.next1').hide().slice(0,sumPages).show()
		
		//编辑功能
			$('.edit').click(function(){
				var username
					var  pass
					var email
					$('#username').val($(this).parents('.rowinfo').find('.rawinfo').html())
					$('#email').val($(this).parents('.rowinfo').find('.rawinfo1').html())
					$('.submit').off().click(()=>{
						username=$('#username').val()
						 pass=$('#pass').val()
						 email=$('#email').val()
						 $(this).parents('.rowinfo').find('.rawinfo').replaceWith(`<td class="rawinfo">${username}</td>`)
						 $(this).parents('.rowinfo').find('.rawinfo1').replaceWith(`<td class="rawinfo1">${email}</td>`)
						 $('#myModal').modal('hide');
						 })
						 
			})
			
				// var info={}
				// info.name=username
				// info.type=type
				// info.email=email 
				// console.log(info)
				
				
					// var type=$('#userg').val()
					// console.log(username);
				// $(this).parents('.rowinfo').find('.rawinfo').replaceWith(`<td class="rawinfo">${username}</td>`)
				// $(this).parents('.rowinfo').find('.rawinfo1').replaceWith(`<td class="rawinfo1">${email}</td>`)
			// }
			
			
			// )
			
			// $('.edit').click(function(){
			// $(this).parents('.rowinfo').find('.rawinfo').replaceWith(`<td class="rawinfo">${username}</td>`)
			// $(this).parents('.rowinfo').find('.rawinfo1').replaceWith(`<td class="rawinfo1">${email}</td>`)
			
			// })
			
		
		
		
							
						},
						error: function (error) {
							console.log(error.responseText);
						}
					});
				}
	     
					ajax();
					
						
						$('.pagination li').not('.pre1').not('.next1').click(function(){
							$('.pagination li').removeClass('active')
							$(this).addClass('active')
						})
						
						
						 
						
					
				
						
		
					
					
</script>
